<template>
      <div>
            <!-- 头部轮播图部分 begin -->
            <div>
                  <div class="swiper-container">
                        <div class="swiper-wrapper">
                              <div class="swiper-slide" v-for='list in detailsTitle.imgs' :key="list.id"><img :src="list.imgSrc" alt="" class="detailsImg"></div>
                        </div>
                  </div>
                  <!-- 如果需要分页器 -->
                  <div class="swiper-pagination" id="pagina"></div>
            </div>
            <!-- 头部轮播图部分 end -->
            <div class="hr_shadow"></div>

            <!-- 头部标题部分 begin -->
            <div class="detailsTitleBox">
                  <h1 class="detailsTitle">{{detailsTitle.title}}</h1>
                  <span class="detailsDes">{{detailsTitle.title2}}</span>
                  <div class="detailsPriceBox">
                        <div class="detailsPrice">
                              <i>¥ </i><span class="detailsPriceNum">{{detailsTitle.price}}</span>
                        </div>
                        <span class="detailsGo">加入购物车</span>
                  </div>
             </div>
            <!-- 头部标题部分 end -->

             <!-- 商家详情 begin -->
            <div class="detailsShopWrap">
                  <div class="detailsShopBox">
                        <div class="detailsShopName">
                              <i class="detailsShopIcon"></i>
                              <span class="detailsShop">{{detailsShop.shopName}}</span>
                        </div>
                        <div class="detailsShopPhone">
                              <i class="linkIcon"></i>
                              <span class="detailsShop">{{detailsShop.link}}</span>
                        </div>
                  </div>
                  <p class="detailsShop assess">商家评价<span class="assessCount">(共{{detailsShop.assess}}人评价)</span></p>
                  <div class="assessPro">
                        <div class="h1"></div>
                        <span class="h2"></span>
                        <span class="h3">{{detailsShop.goodassess}}</span>
                  </div>
            </div>
             <!-- 商家详情 end -->

             <!-- 查看图文详情 begin -->
             <div class="clickMore">
                  <router-link to="/details/list" class="detalisList">查看图文详情</router-link><i class="iconRight"></i>
             </div>
             <!-- 查看图文详情 end -->

             <!-- 快捷导航 begin -->
            <div class="quickNavBox bottom" @click="showHide">
                  <div class="quickNavList displayNone">
                        <router-link to="/index" class="navItem nav1">首页</router-link>
                        <router-link to="/index/list" class="navItem nav2">分类</router-link>
                        <router-link to="/index/cart" class="navItem nav3">购物车</router-link>
                        <router-link to="/index/order" class="navItem nav4">订单</router-link>
                        <router-link to="/index/mine" class="navItem nav5">我的</router-link>
                        <i class="navIc"></i>
                  </div>
            </div>
            <!-- 快捷导航 end -->

            <!-- 页脚购物车部分 begin-->
            <div class="cartBox">
                  <div class="cartImg"></div>
                  <div class="cartText">购物车是空的</div>
                  <div class="cartPay">去结算</div>
            </div>
            <!-- 页脚购物车部分 end -->  

            <!-- 首页部分 end-->
            
      </div>
</template>
<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
import "swiper/dist/js/swiper.min.js";
export default {
      data(){
            return{
                  detailsTitle:{},
                  detailsShop:{}
            }
      },
      methods:{
            // 详情页面头部请求方法
            getDetailsTitle(){
                  this.jq.get(this.apiurl+'/details/title').done(result=>{
                        if(result.error==0){
                              this.detailsTitle=result.data
                        }
                  })
            },
            // 详情页面商家部分请求
            getDetailsShop(){
                  this.jq.get(this.apiurl+'/details/shop').done(result=>{
                        if(result.error==0){
                              this.detailsShop=result.data
                        }
                  })
            },
            showHide(){
                  this.jq('.quickNavList').toggleClass('displayNone')
            }
      },
      created(){
            // 调用详情页面头部请求方法
            this.getDetailsTitle()
            // 调用详情页面商家请求方法
            this.getDetailsShop()
      },
      mounted() {
      // swiper插件的配置
      var mySwiper = new Swiper(".swiper-container", {
            direction: "horizontal",
            loop : true,
            pagination: {
            el: '.swiper-pagination',
                  type: 'fraction',
            },
      });
      }
}
</script>
<style>
/*头部轮播及标题部分 begin*/ 
#pagina{
      background-color: rgba(0,0,0,0.4);
      width: 50px;
      font-size: 20px;
      color: white;
      height: 2rem;
      border-radius: 1rem;
      position: absolute;
      left: 86%;
      top: 31.5rem;
}
.hr_shadow{
      width: 100%;
      height: 8px;
      background: -webkit-linear-gradient(left,#ffffff 0%,#d4d3d3 49%,#d4d3d3 50%,#ffffff 100%);
      box-shadow: inset 0px 8px 5px rgba(255,255,255,0.8);
      margin-top:-0.25rem;
}
.detailsImg{
      width:auto;
      height: 414px;
}
.detailsTitleBox{
      background: white;
      box-sizing: border-box;
      padding: 1rem;
      text-align: center;
}
.detailsTitle{
      font-size: 1.6rem;
      margin: 0 auto;
      color: #333;
      line-height: 1.8rem;
      margin-bottom:0.4rem;
}
.detailsDes{
      color: #999;
      font-size: 13px;
}
.detailsPriceBox{
      height: 4rem;
      padding-top:1.2rem;
}
.detailsPrice{
      font-size: 20px;
      color: #ff3434;
      float: left;
}
.detailsPriceNum{
      font-size: 30px;
}
.detailsGo{
      color: white;
      background: #47b34f;
      font-size: 13px;
      line-height: 2.8rem;
      padding: 0 1rem;
      float: right;
      border-radius: 2px;
      margin-top:0.5rem;
}
/*头部轮播及标题部分 end*/ 

/*商家部分 begin*/ 
.detailsShopWrap{
      margin-top: 0.8rem;
      background: white;
      padding: 0 0.8rem;
      height: 10rem;
}
.detailsShopBox{
      height: 50px;
      line-height: 50px;
}
.detailsShopIcon{
      display: inline-block;
      width: 1.6rem;
      height: 1.6rem;
      background: url('/static/img/detail.png') no-repeat -44px 0px;
      background-size: 200px 150px;
      vertical-align: middle;
}
.detailsShop{
      color: #333;
      font-size: 13px;
}
.detailsShopName{
      float: left;
}
.detailsShopPhone{
      float: right;
      height: 20px;
      line-height: 20px;
      border-left: 1px solid #d9d9d9;
      margin-top: 15px;
      padding-left: 5rem;

}
.linkIcon{
      display: inline-block;
      width: 1.6rem;
      height: 1.6rem;
      background: url('/static/img/detail.png') no-repeat -20px 0px;
      background-size: 200px 150px;
      vertical-align: middle;
}
.assess{
      line-height: 50px;
      border-top: 1px solid rgba(232,232,232,0.5)
}
.assessCount{
      color: #999;
      font-size: 1rem;
}
.assessPro{
      margin-top: 3px;
      position: relative;
}
.h1{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background-color: #47b34f;
}
.h2{
      display: inline-block;
      position: absolute;
      right: 60px;
      top: -2px;
      width: 4px;
      height: 4px;
      background-color: #ffffff;
      border-radius: 4px;
      border: 2px solid #47b34f;
}
.h3{
      color: #47b34f;
      display: inline-block;
      text-align: right;
      background: white;
      position: absolute;
      right: 0;
      top: -8px;
      box-sizing: border-box;
      width: 60.75px;
}
/*商家部分 end*/ 

/*查看图文详情 begin*/
.clickMore{
      margin:2.6rem 0 5rem 0;
      text-align: center;
} 
.detalisList{
      color: #333;
      font-size: 13px;
}
.iconRight{
      display: inline-block;
      width:1.4rem;
      height:1.4rem;
      background:#47b34f url('/static/img/right.png') no-repeat center;
      background-size: 0.6rem;
      border-radius: 50%;
      vertical-align: middle;
      margin-left: 0.5rem;
}   
/*查看图文详情 end*/ 

/*快捷导航 begin*/
.quickNavBox{
      position: fixed;
      z-index: 1000;
      right: 0;
      bottom: 60px;
      width: 36px;
      height: 36px;
      background: rgba(0,0,0,0.8) url('/static/img/bm.png') 7px 7px no-repeat;
      background-size: 65px 20px;
      border: 1px solid #757575;
      border-radius: 4px 0 0 4px; 
}
.quickNavList{
      position:absolute;
      width: 95px;
      right: -1px;
      bottom: 42px;
      border: 1px solid #757575;
}
.navItem{
      display: block;
      background: rgba(0,0,0,0.8) url('/static/img/bmenu.png') no-repeat;
      background-size: 16px auto;
      color: white;
      line-height: 35px;
      border-bottom: 1px solid #4b4b4b;
      padding-left:37px;
      font-size:14px;
}
.navIc{
      display:block;
      width: 0;
      height: 0;
      border-width: 6px;
      border-color: rgba(0,0,0,0.8) transparent transparent transparent;
      border-style: solid;
      position: absolute;
      bottom: -12px;
      right: 10px;
}
.nav1{
      background-position: 10px -50px
}
.nav2{
      background-position: 10px -100px
}
.nav3{
      background-position: 10px -150px
}
.nav4{
      background-position: 10px -200px
}
.nav5{
      background-position: 10px -250px
}
.bottom{
      bottom: 115px;
}
/*快捷导航 end*/

.displayNone{
      display: none;
}

</style>


